<template>
  <div class="app-container">
    <!-- 新增按钮 -->
    <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px">
      新增项目人员
    </el-button>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="date" label="新增日期" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑人员' : '新增人员'" width="500">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="formData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formData.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新增日期">
          <el-date-picker v-model="formData.date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from "element-plus";
// 表格数据
const tableData = ref([
  {
    id: 1,
    age: '25',
    name: '张三',
    date: '2025-01-01'
  },
  {
    id: 2,
    age: '30',
    name: '李四',
    date: '2025-02-15'
  }
])

// 对话框控制
const dialogVisible = ref(false)
const isEdit = ref(false)
const currentIndex = ref(-1)

// 表单数据
const formData = reactive({
  id: null,
  name: '',
  age: '',
  date: ''
})

// 新增按钮点击
const handleAdd = () => {
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
}

// 编辑按钮点击
const handleEdit = (index, row) => {
  isEdit.value = true
  currentIndex.value = index
  Object.assign(formData, JSON.parse(JSON.stringify(row)))
  dialogVisible.value = true
}

// 删除按钮点击
const handleDelete = (index) => {
  tableData.value = tableData.value.filter((_, i) => i !== index)
}

// 提交表单
const submitForm = () => {
  const isEmpty = Object.entries(formData)
    .filter(([key]) => key !== 'id') // 排除id字段
    .every(([_, value]) => {
      if (typeof value === 'string') return value.trim() === ''
      return !value // 处理日期字段的null值
    })

  if (isEmpty) {
    ElMessage.warning("至少需要填写一项内容");
    return
  }
  if (isEdit.value) {
    // 更新数据
    tableData.value[currentIndex.value] = { ...formData }
  } else {
    // 新增数据
    const newId = tableData.value.length
      ? Math.max(...tableData.value.map((item) => item.id)) + 1
      : 1
    console.log(formData, 'newIdnewId');

    tableData.value.push({
      ...formData,
      id: newId
    })
  }
  dialogVisible.value = false
  resetForm()
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    id: null,
    name: '',
    age: '',
    date: ''
  })
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>